"use client";
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import Link from "next/link";
import { useEffect, useState } from "react";

interface NavList {
  id: number | string;
  navName: string;
  page: string;
}
const navList: NavList[] = [
  {
    navName: "主页",
    id: 1,
    page: "/",
  },
  {
    navName: "关于",
    id: 2,
    page: "/pages/about",
  },
];

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

// export const metadata: Metadata = {
//   title: "Create Next App",
//   description: "Generated by create next app",
// };

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [isLoggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    document.cookie.split(";")?.map((t) => {
      if (
        t.split("=") &&
        t.split("=")[0].trim() == "Backstage-Token" &&
        t.split("=")[1]
      ) {
        setLoggedIn(true);
      }
    });

  }, []);
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased flex min-h-dvh mx-auto`}
      >
        {isLoggedIn && (
          <nav className="flex-grow-0 w-1/12 border-red-600 border px-4 py-2 flex justify-center items-center">
            <ul>
              {navList.map((t) => (
                <li key={t.id}>
                  <Link href={t.page}>{t.navName}</Link>
                </li>
              ))}
            </ul>
          </nav>
        )}
        <main className="flex-1">{children}</main>
      </body>
    </html>
  );
}
